<template>
  <div class="dialog">
    <el-dialog :title="title" :visible.sync="visible" :close-on-click-modal="false" width="75%" top="10vh" append-to-body>
      <div class="param-main" v-if="level == '1'">
        <el-radio-group v-model="brandRadio" size="small" @change="scrollOn">
          <el-radio-button :label="item.name" v-for="(item, index) in letter" :key="index"></el-radio-button>
        </el-radio-group>
        <div class="content">
          <div class="page_content">
            <div class="brand" v-for="item in brandsList" :key="item.id">
              <span @click="onBrandClick(item)">{{ item.name }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="param-main" v-if="level == '2' || level == '3'">
        <el-breadcrumb separator-class="el-icon-arrow-right" style="padding: 0 0 9px 9px">
          <transition-group name="breadcrumb">
            <el-breadcrumb-item v-for="(item, index) in levelList" :key="index">
              <span @click="onBreadcrumbClick(item)"> {{ item.name }}</span>
            </el-breadcrumb-item>
          </transition-group>
        </el-breadcrumb>
        <div class="content page-pane3" v-if="level == '2'">
          <div class="series" v-for="it in seriesList" :key="it.type">
            <div class="type_name">· {{ it.type }}</div>
            <div class="page_content">
              <div class="brand2" v-for="item in it.children" :key="item.id">
                <div @click="onSeriesClick(item)">{{ item.name }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="content" v-if="level == '3'">
          <el-table ref="tblMain" :data="listData" v-loading.body="loading" max-height="550px" border stripe>
            <el-table-column prop="vehicleModel" label="车型" width="300" show-overflow-tooltip>
              <template slot-scope="scope">
                <span style="cursor: pointer; color: #409eff" @click="onSelect(scope.row)">{{ scope.row.vehicleModel
                }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="year" label="年份" align="center"></el-table-column>
            <el-table-column prop="engine" label="发动机" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="displacement" label="排量" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="frontBrake" label="前制动器" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="rearBrake" label="后制动器" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="bodyForm" label="车身形式" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="driveMethod" label="驱动方式" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="parkingBrake" label="驻车制动" align="center" show-overflow-tooltip></el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getCarLetterList,
  getCarList
} from '@/api/carLine'
import {
  carBrandTree
} from '@/api/business'
export default {
  name: 'VehicleModelDialog',
  data() {
    return {
      title: '车型选择',
      visible: false,
      level: "1",
      brandRadio: '全部',
      letter: [],
      brandsList: [],
      allBrands: [],
      curBrand: {},
      seriesList: [],
      levelList: [{ name: '全部品牌', id: "", level: "1" }],
      loading: false,
      listData: []
    }
  },
  mounted() { },
  methods: {
    select() {
      this.visible = true;
      this.init();
    },
    init() {
      this.level = "1";
      this.brandRadio = "全部";
      this.letter = [];
      this.brandsList = [];
      this.allBrands = [];
      this.seriesList = [];
      this.listData = [];
      this.levelList = [{ name: '全部品牌', id: "", level: "1" }];
      for (var i = 0; i < 26; i++) {
        let op = {
          name: String.fromCharCode(65 + i),
          id: i
        }
        this.letter.push(op)
      }
      this.letter.unshift({
        name: '全部',
        id: ''
      })
      this.getBrandsList().then(() => {
        this.scrollOn()
      })
    },
    /**
     * 获取品牌列表信息
     */
    getBrandsList() {
      return new Promise((resolve) => {
        let data = {
          page: 1,
          size: 1000
        }
        getCarLetterList(data).then((res) => {
          const { code = undefined, data = {} } = res.data
          if (code == 0) {
            this.allBrands = data.content
            resolve()
          } else {
            this.$message.error("请求失败")
          }
        })
      })
    },
    /**
     * 按字母分类数据
     */
    scrollOn() {
      this.brandsList = []
      if (this.brandRadio != '全部') {
        this.allBrands.forEach((el) => {
          if (el.initial.charAt(0) == this.brandRadio) {
            this.brandsList.push(el)
          }
        })
      } else {
        this.brandsList = this.allBrands
      }
    },
    // 面包屑点击
    onBreadcrumbClick(item) {
      if (this.level != item.level) {
        this.level = item.level;
        this.levelList = this.levelList.slice(0, Number(this.level));
        if (this.level == "1") {
          this.brandRadio = '全部';
          this.brandsList = this.allBrands;
        }
      }
    },
    // 品牌点击
    onBrandClick(item) {
      this.curBrand = item;
      this.level = "2";
      this.levelList.push({ name: item.name, id: item.id, level: "2" });
      carBrandTree({ letterId: item.id }).then((res) => {
        const { code = undefined, data = [] } = res.data
        if (code == 0) {
          this.seriesList = data
        } else {
          this.$message.error("请求失败")
        }
      })
    },
    // 车系点击
    onSeriesClick(item) {
      this.level = "3";
      this.levelList.push({ name: item.name, id: item.id, level: "3" });
      let me = this
      let param = {
        letterId: this.curBrand.id,
        brandId: item.id,
        page: "1",
        size: "1000",
        order: "",
        vehicleModel: ""
      }
      me.loading = true
      getCarList(param).then((res) => {
        me.loading = false
        let data = res.data
        if (data && data.code == 0) {
          me.listData = data.data.content
        }
      })
    },
    //选中 
    onSelect(item) {
      this.$emit("ok", item);
      this.visible = false;
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  height: 550px;
  overflow: auto;
}

.series {
  padding: 20px;
}

.type_name {
  color: #000;
  font-size: 14px;
  font-weight: 600;
}

.page_content {
  display: flex;
  flex-wrap: wrap;
  padding: 5px;

  .brand {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    align-items: center;
    width: 10%;
    padding: 10px;

    span {
      cursor: pointer;
    }

    span:focus {
      color: #fff;
      background-color: #409eff;
      border-color: #409eff;
      box-shadow: -1px 0 0 0 #409eff;
    }

    span:hover {
      color: #409eff;
      background-color: #fff;
      border-color: #409eff;
    }

    .brand_del {
      margin-left: 10px;
    }
  }

  .brand2 {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    align-items: center;
    width: 15%;
    margin: 10px;


    cursor: pointer;

    div {
      padding: 5px;
      width: 100%;
      border: 1px rgb(255, 195, 52) solid;
    }

    div:focus {
      color: #fff;
      background-color: #409eff;
      border-color: #409eff;
      box-shadow: -1px 0 0 0 #409eff;
    }

    div:hover {
      color: #409eff;
      background-color: #fff;
      border-color: #409eff;
    }

    .brand_del {
      margin-left: 10px;
    }
  }
}


/deep/.el-breadcrumb__item.el-breadcrumb__inner span:focus {
  color: #409eff;
  cursor: pointer;
}

span:hover,
i:hover {
  color: #409eff;
  cursor: pointer;
}
</style>
